

<template>
  <div id="chart" style="width: 600px; height: 400px;">
  </div>
</template>
<script >
import * as echarts from 'echarts';

export default {
  name: 'HelloWorld',
  data() {
    return {
      myChart: null, // 用于存储 ECharts 实例
      ws: null,      // 用于存储 WebSocket 实例
      option:'',
      heartbeatInterval: null, // 心跳定时器
      reconnectAttempts: 0,    // 重连次数
      maxReconnectAttempts: 10, // 最大重连次数
      reconnectDelay: 3000,    // 重连延迟时间（毫秒）
      isConnect:false
    };
  },
  mounted() {
    // 初始化 ECharts
    const chartDom = document.getElementById('chart');
    this.myChart = echarts.init(chartDom);

    // 初始化 WebSocket
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      // 创建 WebSocket 连接
      this.ws = new WebSocket('http://localhost:3000/ws'); // 替换为你的 WebSocket 服务器地址
      // 监听连接成功
      this.ws.onopen = () => {
        this.isConnect = true;
        console.log('WebSocket 连接成功');
        this.reconnectAttempts = 0; // 重置重连次数
        this.startHeartbeat(); // 启动心跳
      };

      // 监听服务器发送的消息
      this.ws.onmessage = (event) => {
        console.log('收到服务器消息:', event.data);
        const newData = JSON.parse(event.data); // 假设服务器发送的是 JSON 数据
        this.option = newData;
        if(this.isConnect){
          this.updateChart(newData); // 更新图表
        }
      };

      // 监听连接关闭
      this.ws.onclose = () => {
        this.isConnect = false
        console.log('WebSocket 连接关闭');
        this.stopHeartbeat(); // 停止心跳
        this.handleReconnect(); // 尝试重连
      };

      // 监听连接错误
      this.ws.onerror = (error) => {
        this.isConnect = false
        console.error('WebSocket 错误:', error);
        this.stopHeartbeat(); // 停止心跳
        this.handleReconnect(); // 尝试重连
      };
    },
    startHeartbeat() {
      // 每隔 30 秒发送一次心跳
      this.heartbeatInterval = setInterval(() => {
        if (this.ws.readyState === WebSocket.OPEN) {
          this.ws.send(JSON.stringify({ type: 'ping' })); // 发送心跳消息
        }
      }, 30000);
    },
    stopHeartbeat() {
      // 清除心跳定时器
      if (this.heartbeatInterval) {
        clearInterval(this.heartbeatInterval);
        this.heartbeatInterval = null;
      }
    },
    handleReconnect() {
      if (this.reconnectAttempts < this.maxReconnectAttempts) {
        this.reconnectAttempts++;
        console.log(`尝试重连，第 ${this.reconnectAttempts} 次`);
        setTimeout(() => {
          this.initWebSocket(); // 重新初始化 WebSocket
        }, this.reconnectDelay);
      } else {
        console.error('已达到最大重连次数，停止重连');
      }
    },
    updateChart(newData) {
      // 更新 ECharts 数据
      this.myChart.setOption(this.option);
    }
  },
  beforeUnmount() {
    // 组件销毁时关闭 WebSocket 连接
    if (this.ws) {
      this.ws.close();
    }
  }
};
</script>
<style scoped>

</style>
